<style rel="stylesheet/scss" lang="scss" >
@import "./../../mixin.scss";
.activity-wrapper {
  // width: 50%;
  // float: left;
  // overflow: hidden;
      width: 488px;
    height: 398px;
    float:right;
  .activity {
    //margin-left: 10px;
  }
  .activity-header {
    font-weight: 700;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.678431);
  }
  .activity-time {
    padding: 4px 10px;
    cursor: pointer;
  }
  .activity-time-select {
    color: #ffffff;
    background: #4080ff;
    border-radius: 15px;
    i {
      display: inherit;
    }
  }
  .el-dropdown {
    margin-left: 10px;
  }
  .activity-header-right {
    float: right;
  }
  .bar-icon-window {
    margin-left: 10px;
    font-size: 10px;
    cursor: pointer;
    color: #adadad;
  }
  .el-card__header {
    border-bottom: 0;
  }
}
</style>
<template>
  <div class="activity-wrapper">
    <el-card
      v-loading="isLoading"
      :body-style="{ height:'340px' }"
      :class="[windowStatus ? 'full-screen' : '']"
      class="activity"
      shadow="never"
      element-loading-text="加载中..."
      style="background: #ffffff;"
    >
      <div slot="header">
        <span class="activity-header">活跃度统计</span>
        <div class="activity-header-right">
          <el-dropdown
            @command="handleSelDate"
          >
            <span class="activity-time activity-time-select">
              {{ timeType }}月
              <i class="el-icon-caret-bottom" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="item"
                v-for="item in 12"
                :key="item"
              >
                {{ item }}月
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown
            @command="handleSelType"
          >
            <span class="activity-time activity-time-select">
              {{ type }}
              <i class="el-icon-caret-bottom" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="部门">
                部门
              </el-dropdown-item>
              <el-dropdown-item command="个人">
                个人
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <i
            @click="handleWindow()"
            :class=" windowStatus ? 'jeicon-minus':'jeicon-max' "
            class="jeicon  bar-icon-window"
          />
        </div>
      </div>
      <div
        id="activity-chart"
        :style="{width: '100%', height: '300px'}"
      />
    </el-card>
  </div>
</template>
<script>
import { fetchDept } from '../../actions/manage';

export default {
  name: 'Activity',
  data() {
    return {
      timeType: 0,
      type: '部门',
      month: '',
      windowStatus: false,
      isLoading: false,
      chart: {},
      data: {},
    };
  },
  computed: {
  },
  watch: {
    windowStatus: {
      handler(curVal) {
        // 全屏隐藏左边菜单栏
        if (curVal) {
          JE.setWestMenuVisible(false);
        } else {
          JE.setWestMenuVisible(true);
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.timeType = new Date().getMonth() + 1;
    setTimeout(() => {
      document.querySelector('#activity-chart').style.width = `${document.querySelector('.activity').offsetWidth - 40 - 2}px`;
      this.chart = echarts.init(document.getElementById('activity-chart'), 'macarons');
      this.getData();
    });
  },
  methods: {
    // 放大缩小页面
    handleWindow() {
      this.windowStatus = !this.windowStatus;
      this.resizeChart();
    },
    resizeChart() {
      setTimeout(() => {
        document.querySelector('#activity-chart').style.width = `${document.querySelector('.activity').offsetWidth - 40 - 2}px`;
        if (this.windowStatus) {
          document.querySelector('#activity-chart').style.height = `${document.querySelector('.activity').offsetHeight - 80}px`;
        } else {
          document.querySelector('#activity-chart').style.height = '300px';
        }
        this.chart.resize();
      }, 0);
    },
    // 日期
    handleSelDate(command) {
      this.timeType = command;
      this.getData();
    },
    // 类型
    handleSelType(command) {
      this.type = command;
      this.getData();
    },
    chartOption() {
      const that = this;
      let list = [];
      const obj = {
        name: this.data.types[0],
        type: 'bar',
        barGap: 0,
        barWidth: 30,
        barMinHeight: 3,
        itemStyle: {
          // color: '#9fe6b8'
        },
        data: this.data.cs || [],
      };

      const obj1 = {
        name: this.data.types[1],
        type: 'bar',
        barGap: 0,
        barWidth: 30,
        barMinHeight: 3,
        itemStyle: {
          // color: '#ff9f7f'
        },
        data: this.data.rs || [],
      };
      if (this.type === '部门') {
        list = [obj, obj1];
      } else {
        list = [obj];
      }
      const shortX = [];
      if (this.data.x.length > 0) {
        this.data.x.map((item) => {
          if (item.length > 5) {
            shortX.push(`${item.substring(0, 5)}...`);
          } else {
            shortX.push(item);
          }
          return item;
        });
      }
      this.chart.setOption({
        tooltip: {
          formatter(e) {
            return that.data.x[e[0].dataIndex];
          },
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: this.data.types || [],
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#cccccc',
              },
            },
            axisLabel: {
              color: '#333333',
              interval: 0,
            },
            data: shortX,
          },
        ],
        minInterval: 1,
        boundaryGap: [0, 0.1],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#cccccc',
              },
            },
            axisLabel: {
              color: '#333333',
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
              },
            },
          },
        ],
        series: list,
      }, true);
    },
    getData() {
      this.isLoading = true;
      const year = new Date().getFullYear();
      let month = this.timeType;
      if (this.timeType < 10) {
        month = `0${this.timeType}`;
      }
      const str = `${year}-${month}`;
      fetchDept({ queryType: 'MONTH', type: this.type == '部门' ? 'DEPT' : 'USER', dateVal: str }).then((data) => {
        this.isLoading = false;
        this.data = data;
        this.chartOption();
      });
    },

  },
};
</script>
